<template>
  <div id="order">
      <h1 class="header"><span @click="backAction">&lt;</span>我的订单</h1>
      <div class="warp">
      <app-scroll class="content1">
      
      <div class="box">
          <div v-for="(item,index) in data" :key="item.id" :class="{active:index==0}" class="content">
              <img :src="item.item.airImage" alt="">
              <div class="right">
                  <p>{{item.item.title}}</p><p class="num">数量: {{item.num}}个</p>
                  <h1>小计: ￥{{(item.item.price * item.num).toFixed(2)}}</h1>
              </div>
              
          </div>

      </div>
      </app-scroll>
      </div>
      <div class="selectCoupon" v-if="this.$route.params.tit">
          <router-link to="/coupon"><div class="cp">
          <h2>已选择优惠券: </h2>
          <span> 满{{this.$route.params.tit.totle}}减{{this.$route.params.tit.count}}元</span>
          </div></router-link>
      </div>
      <div class="selectCoupon" v-else>
          <router-link to="/coupon"><div class="nav-i"><img src="/img/youhuiq.png" alt=""><span>去选取优惠券</span> </div></router-link>
      </div>
      <div class="footer">          
          总计:￥{{total}}<span> - {{count}}元</span>
      </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
 name:'Order',
 
 data(){
     return{
         id:[],
         data:[],
         total:0,
         count:0
     }
 },

 methods:{
     backAction(){
         this.$router.push({name:"Index"});
     },


     async requestData(){
         const {data:{data}}=await axios.get('/data/index.json');
        //  console.log(this.id);
        data.forEach(item=>{
            JSON.parse(localStorage.getItem("id")).forEach(item1=>{
                if(item.id===item1.id){
                    this.data.push({item,num:item1.num});
            }
            })
            
            
        })
        this.data.forEach(item=>{
            this.total+=item.item.price*item.num
        })
        this.total=this.total.toFixed(2);
        // console.log(this.total);
        // console.log(this.data);
        if(this.$route.params.tit){
                if(this.total>this.$route.params.tit.totle){
                    this.count = this.$route.params.tit.count
                }
        }
        
     },

      
 },

 created(){
    this.requestData();
    // console.log(this.$route.params.tit)
 }
}
</script>

<style scoped lang='scss'>
#order{
    width: 100%;
    height: 100%;
    
}
.warp{
    width: 100%;
    position: absolute;
    top: 50px;
    bottom: 100px;
    z-index: 99;
}
.content1{
    width: 100%;
    height: 100%;
}
    .header{
        width: 100%;
        height: 50px;
        text-align: center;
        font-size: 18px;
        font-weight: bold;
        position: relative;
        line-height: 50px;
        color: white;
        background-image: linear-gradient(90deg, rgba(255, 115, 80, 1) 0%, rgba(255, 115, 80, 1) 0%, rgba(254, 155, 122, 1) 100%, rgba(254, 155, 122, 1) 100%);
        span{
            font-size: 20px;
            display: inline-block;
            position: absolute;
            top: 10px;
            left: 14px;
            width: 30px;
            height: 30px;
            text-align: center;
            line-height: 30px;
        }
    }

    .box{
        width: 100%;
        padding: 0px 12px;
        box-sizing: border-box;
        
        .active{
            border-top: 1px solid #ccc;
        }
        .content{
            width: 100%;
            height: 150px;
            // border-top: 1px solid #ccc;
            border-bottom: 1px solid #ccc;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .right{
                width: 240px;
                height: 100%;
                display: flex;
                flex-direction: column;
                justify-content: center;
                padding: 0 12px;
                box-sizing: border-box;
            }
            p{
                width: 100%;
                // overflow: hidden;
                // white-space: nowrap;
                // text-overflow: ellipsis;
                font-size: 13px;
                color: #333;
                margin-bottom: 8px;
            }
            .num{
                margin-left: 150px;
                color: #CC3429;
            }
            h1{
                font-size: 15px;
                color: #CC3429;
                font-weight: bold;
                margin-left: 90px;
            }
        }
    }

    .footer{
        width: 100%;
        height: 50px;
        position: absolute;
        bottom: 0;
        left: 0;
        background-color: orange;
        font-size: 20px;
        line-height: 50px;
        padding: 0 12px;
        box-sizing: border-box;
        color: white;
        span{
            color: #CC3429;
            font-size: 16px;
            font-weight: 700;
        }
    }

.selectCoupon{
    height: 50px;
    background: #f3f3f3;
    width: 100%;
    position: absolute;
    bottom: 50px;
    padding: 5px 15px;
    box-sizing: border-box;
    .nav-i{
        float: right;
        height: 40px;
        width: 150px;
        border-radius: 20px;
        background:  rgba(254, 155, 122, 1);
       display: flex;
        justify-content: center;
       line-height: 40px;

        img{
            height: 35px;
            width: 35px;
        }
        span{
            margin-left: 5px;
            font-size: 14px;
            color:  #fff;
            font-weight: 700;
        }
    }
}
.cp{
    float: right;
    height: 40px;
    width: 220px;
    border-radius: 20px;
    background: #8078FF;
    display: flex;
    justify-content: center;
    line-height: 40px;
    span{
        font-size: 14px;
        margin-left: 10px;
        color: #CC3429;
    }
}
</style>